---
title: Button
description: Displays a button or a component that looks like a button.
component: Button
---

<LiveComponent language="tsx">
{`
  import { Button } from "@pipecat-ai/voice-ui-kit";

  <Button variant="primary">Click me</Button>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    variant: {
      description: "The visual style variant of the button",
      type: '"primary" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "active" | "inactive"',
      required: false,
      default: '"primary"',
    },
    size: {
      description: "The size of the button",
      type: '"sm" | "md" | "lg" | "xl"',
      required: false,
      default: '"md"',
    },
    rounded: {
      description: "The border radius of the button",
      type: '"size" | "sm" | "lg" | "xl" | "full" | "none"',
      required: false,
      default: '"size"',
    },
    state: {
      description: "Override variant colors for specific states",
      type: '"default" | "active" | "inactive"',
      required: false,
      default: '"default"',
    },
    isIcon: {
      description: "Whether the button is icon-only",
      type: "boolean",
      required: false,
      default: "false",
    },
    isLoading: {
      description: "Whether the button is in a loading state",
      type: "boolean",
      required: false,
      default: "false",
    },
    loader: {
      description: "The type of loading indicator",
      type: '"icon" | "stripes"',
      required: false,
      default: '"icon"',
    },
    isFullWidth: {
      description: "Whether the button should take full width",
      type: "boolean",
      required: false,
      default: "false",
    },
    uppercase: {
      description: "Whether to display text in uppercase",
      type: "boolean",
      required: false,
      default: "false",
    },
    noContainerQueries: {
      description: "Disable container queries for sizing",
      type: "boolean",
      required: false,
      default: "false",
    },
    asChild: {
      description: "Whether to render as a different element using Radix Slot",
      type: "boolean",
      required: false,
      default: "false",
    },
    disabled: {
      description: "Whether the button is disabled",
      type: "boolean",
      required: false,
      default: "false",
    },
    className: {
      description: "Additional CSS classes to apply",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Variants

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Button variant="primary">Primary</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="active">Active</Button>
        <Button variant="inactive">Inactive</Button>
    </div>
`}
</LiveComponent>

### Sizes

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Button size="sm">SM</Button>
        <Button size="md">MD</Button>
        <Button size="lg">LG</Button>
        <Button size="xl">XL</Button>
    </div>
`}
</LiveComponent>

### With Icons

<LiveComponent language="tsx">
{`
    import { Button, TerminalIcon, TriangleAlertIcon } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-col gap-2 w-full">
        <div className="flex flex-row gap-2 w-full justify-center">
            <Button size="sm">
                <TerminalIcon />
                SM With Icon
            </Button>
            <Button size="md">
                <TerminalIcon />
                MD With Icon
            </Button>
            <Button size="lg">
                <TerminalIcon />
                LG With Icon
            </Button>
            <Button size="xl">
                <TerminalIcon />
                XL With Icon
            </Button>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Button size="sm" isIcon>
                <TerminalIcon />
            </Button>
            <Button size="md" isIcon>
                <TerminalIcon />
            </Button>
            <Button size="lg" isIcon>
                <TerminalIcon />
            </Button>
            <Button size="xl" isIcon>
                <TerminalIcon />
            </Button>
        </div>
    </div>
`}
</LiveComponent>

### Rounded

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Button rounded="size">Size (matches size prop)</Button>
        <Button rounded="sm">SM</Button>
        <Button rounded="lg">LG</Button>
        <Button rounded="xl">XL</Button>
        <Button rounded="full">Full</Button>
        <Button rounded="none">None</Button>
    </div>
`}
</LiveComponent>

### Loading States

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Button size="sm" loader="icon" isLoading>
            Icon
        </Button>
        <Button size="sm" loader="stripes" isLoading>
            Stripes
        </Button>
        <Button size="sm" loader="stripes" isLoading variant="secondary">
            Stripes
        </Button>
        <Button size="sm" loader="stripes" isLoading variant="outline">
            Stripes
        </Button>
        <Button size="sm" loader="stripes" isLoading variant="destructive">
            Stripes
        </Button>
        <Button size="sm" loader="stripes" isLoading variant="active">
            Stripes
        </Button>
        <Button size="sm" loader="stripes" isLoading variant="inactive">
            Stripes
        </Button>
    </div>
`}
</LiveComponent>

### States

Buttons can accept a <code>state</code> prop that overrides the variant colors. This is useful when working with devices and mute states, where you want to keep a particular variant but change the color to match the state.

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-col gap-2 w-full">
        <div className="flex flex-row gap-2 w-full justify-center">
            <Button variant="primary" state="default">Primary / Default</Button>
            <Button variant="primary" state="inactive">Primary / Inactive</Button>
            <Button variant="primary" state="active">Primary / Active</Button>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Button variant="outline" state="active">Outline / Active</Button>
            <Button variant="outline" state="inactive">Outline / Inactive</Button>
        </div>
    </div>
`}
</LiveComponent>

### Full Width

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-col gap-2 w-full">
        <Button isFullWidth variant="primary">Full Width Button</Button>
        <Button isFullWidth variant="outline">Full Width Outline</Button>
    </div>
`}
</LiveComponent>

### Uppercase

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Button uppercase>Normal Text</Button>
        <Button uppercase variant="secondary">Secondary Text</Button>
        <Button uppercase variant="outline">Outline Text</Button>
    </div>
`}
</LiveComponent>

### Disabled

<LiveComponent language="tsx">
{`
    import { Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Button disabled variant="primary">Disabled Primary</Button>
        <Button disabled variant="secondary">Disabled Secondary</Button>
        <Button disabled variant="outline">Disabled Outline</Button>
    </div>
`}
</LiveComponent>
